<script setup lang="ts">
import typeIcon from "@/assets/icons/tag.png";
import dateIcon from "@/assets/icons/date.png";
import locationIcon from "@/assets/icons/location.png";
import commentIcon from "@/assets/icons/comment.png";
import lockIcon from "@/assets/icons/look.png";
import homeIcon from "@/assets/icons/home.png";
import Loading from "@/components/Loading/Loading.vue";
import deleteIcon from "@/assets/icons/delete-thing.png";
import { useRouter, useRoute } from "vue-router";
import { computed, reactive } from "vue";
import { tagColor, statusColor, status } from "@/enums/thingEnum";
import { useThingStore } from "@/store/modules/thing";
import { useUserStore } from "@/store/modules/user";
import { storeToRefs } from "pinia";
const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const thingStore = useThingStore();
const { types } = storeToRefs(thingStore);
const { info } = storeToRefs(userStore);

interface IProps {
	thingList: Record<string, any>[];
	countList?: [];
}
const props = defineProps<IProps>();
const list = computed(() => props.thingList);
const emit = defineEmits(["delete", "updateStatus"]);

const pageData = reactive({
	showModal: false as boolean,
	isShowUserInfo: false as boolean,
	selectedStatusId: 0 as number,
	selectedId: 0 as number,
	showStatusOpt: [] as Record<string, any>[],
	statusOptions: [
		{
			label: "正在寻找",
			value: 1,
		},
		{
			label: "等待认领",
			value: 2,
		},
		{
			label: "已经找到",
			value: 3,
		},
		{
			label: "已被认领",
			value: 4,
		},
	],
});

const viewDetail = (id) => {
	router.push({
		name: "detail",
		params: {
			id,
		},
	});
};
const deleteThing = (id: number) => {
	emit("delete", id);
};

const updateStatus = (item) => {
	if (!route.fullPath.includes("/thing/home")) {
		return;
	}

	pageData.selectedStatusId = item.status_id;
	pageData.selectedId = item.id;
	if (item.tag === "寻物启事") {
		pageData.showStatusOpt = pageData.statusOptions.filter(
			(item) => item.label === "正在寻找" || item.label === "已经找到"
		);
	} else {
		pageData.showStatusOpt = pageData.statusOptions.filter(
			(item) => item.label === "等待认领" || item.label === "已被认领"
		);
	}
	pageData.showModal = true;
};

const onPositiveClick = () => {
	emit("updateStatus", {
		id: pageData.selectedId,
		statusId: pageData.selectedStatusId,
	});
	pageData.showModal = false;
};

const onNegativeClick = () => {
	pageData.showModal = false;
};

const showUserInfo = () => {
	pageData.isShowUserInfo = !pageData.isShowUserInfo;
};
</script>

<template>
	<div class="card-box" v-for="item in list" :key="item.id">
		<div class="arrow" v-show="
			pageData.isShowUserInfo && route.fullPath.includes('/thing/detail')
		"></div>
		<div class="code" v-show="
			pageData.isShowUserInfo && route.fullPath.includes('/thing/detail')
		">
			<div class="userInfo">
				<p class="">用户ID: {{ item.user_id }}</p>
				<p class="sex">
					性别:
					{{
						info.user_id === item.user_id
						? info.sex
							? info.sex
							: "未知"
						: item.sex
							? item.sex
							: "未知"
					}}
				</p>
				<p>
					个性签名:
					{{
						info.user_id === item.user_id
						? info.signature
							? info.signature
							: "无"
						: item.signature
							? item.signature
							: "无"
					}}
				</p>
			</div>
			<p class="money">微信打赏码：</p>
			<div class="image-box">
				<n-image-group v-if="item.money_code">
					<n-image width="100" height="100" :src="
						info.user_id === item.user_id ? info.money_code : item.money_code
					" lazy class="image">
						<template #placeholder>
							<Loading />
						</template>
					</n-image>
				</n-image-group>
				<div v-else>未上传</div>
			</div>
		</div>
		<div class="info-box">
			<div class="user-box">
				<n-avatar round size="small" :src="item.head ? item.head : homeIcon" class="avatar" @click="showUserInfo"
					:style="{
						cursor: route.fullPath.includes('/thing/detail')
							? 'pointer'
							: 'default',
					}" />
				<p class="name">{{ item.user_id }}</p>
				<n-tag :type="tagColor[item.tag]" class="tag">
					{{ item.tag }}
				</n-tag>
				<n-tag id="status-steps" :type="statusColor[status[item.status_id]]" :style="{
					cursor: route.fullPath.includes('/thing/home')
						? 'pointer'
						: 'default',
				}" @click="updateStatus(item)">
					{{ status[item.status_id] }}
				</n-tag>
				<n-tag type="info" class="audit-status" v-if="route.fullPath.includes('/thing/home')">{{
					item.audit_status
				}}
				</n-tag>

				<img :src="typeIcon" alt="" class="typeIcon" />
				<p class="type">
					{{ item.TYPE }}
				</p>
			</div>
			<div class="date-box">
				<img :src="dateIcon" alt="" class="date-icon" />
				<p class="date">{{ item.TIME }}</p>
			</div>
			<div class="title-box">
				<p class="title">{{ item.title }}</p>
				<img :src="locationIcon" alt="" class="location-icon" />
				<p class="location">{{ item.location }}</p>
			</div>
			<p class="content" :class="!route.path.includes('/thing/detail') ? '' : 'overflow-content'">
				{{ item.content }}
			</p>
			<div class="footer-box">
				<div class="comment-box">
					<img :src="commentIcon" alt="" class="comment-icon" />
					<p class="commentCount">{{ item.thing_comment_count }} comments</p>
					<img :src="lockIcon" alt="" class="look-icon" />
					<p class="commentCount">
						{{ item.look_count ? item.look_count : 0 }}
					</p>
					<img :src="deleteIcon" alt="" class="delete-icon" v-if="route.fullPath.includes('/thing/home')" />
					<p class="delete" v-if="route.fullPath.includes('/thing/home')" @click="deleteThing(item.id)">
						删除
					</p>
				</div>
				<p class="detail" @click="viewDetail(item.id)" v-if="!route.path.includes('/thing/detail')">
					查看详情
				</p>
			</div>
		</div>
		<div class="thing-box">
			<n-image-group>
				<n-image width="150" height="150" :src="item.img" lazy>
					<template #placeholder>
						<Loading />
					</template>
				</n-image>
			</n-image-group>
		</div>
	</div>
	<n-modal v-model:show="pageData.showModal" :mask-closable="false" preset="dialog" title="修改启事状态" positive-text="确定"
		negative-text="取消" style="width: 800px; position: fixed; left: 400px; top: 100px" @positive-click="onPositiveClick"
		@negative-click="onNegativeClick">
		<div class="model-box">
			<p>状态：</p>
			<n-select style="width: 200px" v-model:value="pageData.selectedStatusId" :options="pageData.showStatusOpt" />
		</div>
	</n-modal>
</template>

<style lang="less" scoped>
@import "@/styles/mixin.less";

@keyframes showInfo {
	0% {
		width: 0;
		height: 0;
		opacity: 0;
	}

	50% {
		width: 160px;
		height: 175px;
		opacity: 0.5;
	}

	100% {
		width: 320px;
		height: 250px;
		opacity: 1;
	}
}

.card-box {
	.flex(row, flex-start, center);
	max-width: 1200px;
	min-width: 800px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 20px;
	padding-top: 20px;
	position: relative;

	.arrow {
		position: absolute;
		top: 45px;
		left: 2px;
		height: 0;
		width: 0;
		border: 10px solid rgb(229, 215, 232);
		border-top-color: transparent;
		border-right-color: transparent;
		border-left-color: transparent;
	}

	// padding: 10px;
	.code {
		// width: 320px;
		// height: 250px;
		z-index: 99;
		border-radius: 5px;
		box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
		position: absolute;
		left: -10px;
		top: 65px;
		border: 1px solid #ccc;
		background-color: #fff;
		padding: 10px 15px;
		font-size: 16px;
		animation: showInfo 0.5s linear forwards;

		.userInfo {
			.sex {
				margin: 5px 0;
			}
		}

		.money {
			margin: 5px 0;
		}

		.image-box {
			.flex(row, center, center);
			// border: 1px solid #000;
			width: 100%;

			.image {}
		}
	}

	.info-box {
		flex: 1;

		.user-box {
			.flex(row, flex-start, center);
			margin-bottom: 10px;

			.avatar {
				height: 24px;
				width: 24px;
				margin-right: 5px;
			}

			.name {
				color: #999;
				margin-right: 10px;
			}

			.tag {
				margin-right: 5px;
			}

			.typeIcon {
				width: 20px;
				height: 20px;
				margin-right: 10px;
				margin-left: 15px;
			}

			.type {
				color: #999;
			}

			.audit-status {
				margin-left: 5px;
			}
		}

		.date-box {
			.flex(row, flex-start, center);
			margin-bottom: 10px;

			.date-icon {
				width: 14px;
				height: 14px;

				margin-right: 5px;
			}

			.date {
				color: #999;
			}
		}

		.title-box {
			.flex(row, flex-start, center);
			margin-bottom: 15px;

			.title {
				font-weight: bold;
				font-size: 22px;
				margin-right: 20px;
			}

			.location-icon {
				width: 18px;
				height: 18px;
				margin-right: 5px;
			}

			.location {
				color: #999;
				font-size: 14px;
			}
		}

		.content {
			margin-bottom: 20px;
		}

		.overflow-content {
			overflow: hidden; //超出的文本隐藏

			text-overflow: ellipsis; //溢出用省略号显示

			display: -webkit-box;

			-webkit-line-clamp: 3; // 超出多少行

			-webkit-box-orient: vertical;
		}

		.footer-box {
			.flex(row, space-between, center);

			.comment-box {
				.flex(row, flex-start, center);

				.comment-icon {
					width: 14px;
					height: 14px;
					margin-right: 5px;
				}

				.commentCount {
					color: #999;
					margin-left: 2px;
				}

				.look-icon {
					width: 20px;
					height: 20px;
					margin-left: 10px;
				}

				.delete-icon {
					width: 14px;
					height: 14px;
					margin-left: 20px;
					margin-right: 5px;
				}

				.delete {
					font-size: 14px;
					color: #999;
					cursor: pointer;
					user-select: none;

					&:hover {
						color: #000;
					}
				}
			}

			.detail {
				color: rgb(3, 180, 170);
				border: 1px solid rgb(3, 180, 170);
				border-radius: 5px;
				cursor: pointer;
				user-select: none;
			}
		}
	}

	.thing-box {
		width: 300px;
		height: 200px;
		// height: 400px;
		// border: 1px solid #ccc;
		.flex(row, center, center);
	}
}

.model-box {
	.flex(row, flex-start, center);

	p {
		font-size: 16px;
	}
}
</style>
